<!doctype html>
<html lang="zh_CN">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">

		<title>动态表格</title>
	</head>
	<body>
		<div id="app">
			<div class="container mt-5">
				<div class="row justify-content-center mb-2">
					<div class="col-6 ml-5">
						<input type="text" placeholder="员工编号" v-model="id" :disabled="flag">
						<input type="text" placeholder="员工姓名" v-model="name">
						<input type="button" @click="addHandle" value="添加">
					</div>
				</div>
				<div class="row justify-content-center">
					<div class="col-6">
						<table class="table table-striped table-bordered text-center">
							<tr>
								<th>编号</th>
								<th>姓名</th>
								<th>入职时间</th>
								<th>操作</th>
							</tr>
							<tr :key='emp.id' v-for="emp in emps">
								<td>{{emp.id}}</td>
								<td>{{emp.name}}</td>
								<td>{{emp.hireDate}}</td>
								<td>
									<a href="" @click.prevent>删除</a>
									<span>|</span>
									<a href="" @click.prevent='editHandle(emp.id)'>修改</a>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
		<script src="js/bootstrap/popper.min.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>
		<script src="js/vue.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					flag:false,
					id: '',
					name: '',
					emps: [{
							id: 1001,
							name: 'haoren',
							hireDate: ''
						},
						{
							id: 1002,
							name: 'lucy',
							hireDate: ''
						},
						{
							id: 1003,
							name: 'lily',
							hireDate: ''
						},
						{
							id: 1004,
							name: 'jerry',
							hireDate: ''
						},
						{
							id: 1005,
							name: 'batman',
							hireDate: ''
						}
					]
				},
				methods: {
					addHandle() {
						let emp = {};
						emp.id = this.id;
						emp.name = this.name;
						emp.hireDate = '';
						//将emp添加到emps中
						this.emps.push(emp);
						//清除输入框中的内容
						this.id = '';
						this.name = '';
					},
					editHandle(id) {
						console.log(id);
						//将id的文本框设置为不可编辑
						this.flag=true;
						//1. 根据id从emps中获得对应的数据
						let emp = this.emps.filter(obj => obj.id == id);
						console.log(emp);
						this.id = emp[0].id;
						this.name = emp[0].name;
					}

				}
			});
		</script>
	</body>
</html>
